<template>
	<view class="tabbar">
		<view :class="[`tab-item`,`tab-item-${curIndex == e.isSelect?'cur':''}`]" v-for="e in tabbarList" :key="e.path"
			@tap="switchTab(e.path)">
			{{e.name}}
		</view>
		<view class="voice" @tap="toChat">

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject
	} from 'vue';
	const jumpPage = inject("jumpPage")
	const props = defineProps(["curIndex"])
	// console.log(props.curIndex, "props")
	const showChat = ref(false)
	const tabbarList = ref([{
		name: "今日",
		isSelect: 0,
		path: "/pages/plan/main"
	}, {
		name: "我的",
		isSelect: 1,
		path: "/pages/mine/main"
	}])
	const switchTab = (url) => {
		uni.switchTab({
			url
		})
	}
	const toChat = () => {
		uni.navigateTo({
			url: '/pages/chat/main',
			animationType: 'slide-in-bottom',
			animationDuration: 200
		});
		console.log('????')
	}
	uni.hideTabBar()
</script>

<style scoped lang="less">
	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 96rpx;
		width: 750rpx;
		height: 140rpx;
		opacity: 1;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		background: #FFFFFF;
		box-shadow: 0px 2rpx 4rpx #000000;

		.tab-item {
			font-size: 32rpx;
			letter-spacing: 0px;
			color: rgba(173, 181, 189, 1);
		}

		.tab-item-cur {
			color: rgba(32, 32, 37, 1);
		}

		.voice {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 74rpx;
			height: 74rpx;
			background-image: url(@/static/voice.png);
			background-size: 100% 100%;
		}
	}
</style>